<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>select validation example</title>
    <script src="../../../node_modules/vue/dist/vue.js"></script>
    <script src="../../../dist/vue-validator.js"></script>
    <style>
      select.invalid { border-color: red; }
      .errors { color: red; }
    </style>
  </head>
  <body>
    <div id="app">
      <validity ref="validity" field="lang" v-model="validation" :validators="{ required: true }">
        <select @change="$refs.validity.validate()">
          <option value="">----- select your favorite programming language -----</option>
          <option value="javascript">JavaScript</option>
          <option value="ruby">Ruby</option>
          <option value="python">Python</option>
          <option value="perl">Perl</option>
          <option value="lua">Lua</option>
          <option value="go">Go</option>
          <option value="rust">Rust</option>
          <option value="elixir">Elixir</option>
          <option value="c">C</option>
          <option value="none">Not a nothing here</option>
        </select>
      </validity>
      <div class="errors">
        <p v-if="validation.result.required">Required !!</p>
      </div>
    </div>
    <script>
      new Vue({
        data: {
          validation: { result: {} }
        }
      }).$mount('#app')
    </script>
  </body>
</html>
